<template>
  <div>
    <el-row>
      <el-col :span="24">
        <van-nav-bar
          title="隐私协议"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" id="privacy-content">
        <div v-html="privacyText"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {Toast} from "vant";

export default {
  data() {
    return {
      privacyText: `
        <h2>隐私协议</h2>
        <p>欢迎使用我们的服务。本隐私协议旨在向您说明我们在您使用我们的服务时如何收集、使用和保护您的个人信息。</p>
        <h3>1. 信息收集</h3>
        <p>我们可能会收集以下信息：</p>
        <ul>
          <li>您在注册时提供的个人信息，如姓名、电子邮件地址、电话号码等。</li>
          <li>您在使用我们的服务时产生的信息，如使用记录、操作日志等。</li>
        </ul>
        <h3>2. 信息使用</h3>
        <p>我们可能会将收集的信息用于以下目的：</p>
        <ul>
          <li>提供、维护和改进我们的服务。</li>
          <li>与您沟通，包括发送通知、更新和营销信息。</li>
        </ul>
        <h3>3. 信息保护</h3>
        <p>我们承诺将采取合理措施保护您的个人信息，防止未经授权的访问、使用、披露或丢失。</p>
        <h3>4. 信息共享</h3>
        <p>我们不会向第三方共享您的个人信息，除非：</p>
        <ul>
          <li>获得您的明确同意。</li>
          <li>根据法律法规的要求。</li>
        </ul>
        <h3>5. 信息存储</h3>
        <p>我们将根据法律法规的要求以及业务运营的需要，合理确定个人信息的存储期限。</p>
      `
    };
  },
  methods: {
    onClickLeft() {
      Toast('返回');
      // 返回上一个页面
      this.$router.go(-1);
    }
  }
};
</script>

<style>
#privacy-content {
  padding: 20px;
  text-align: left;
  font-size: 16px;
}

#privacy-content h2 {
  font-size: 20px;
  margin-bottom: 10px;
}

#privacy-content h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

#privacy-content p {
  margin-bottom: 10px;
}

#privacy-content ul {
  margin-bottom: 10px;
}

#privacy-content li {
  margin-bottom: 5px;
}
</style>
